<template>
  <view class="page">
    <view class="casing" @click="goDetail">
      <image class="img" :src="items.img" mode="scaleToFill" />
      <view class="txt text-one"> {{ items.title }}</view>
      <view class="tips">{{ items.belong }}</view>
      <view class="footerPart"
        >{{ items.studyNum }}
        <text>人已学习</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      btnImg: "",
      mt: "0",
      id: null,
    };
  },
  props: {
    items: {
      type: Object,
      defult: {},
    },
  },
  onLoad(options) {},
  onShow() {},
  // 滚动监听
  onPageScroll(e) {},
  methods: {
    //to商品详情
    goDetail() {
      uni.navigateTo({
        url: "/pages/playCenter/index",
      });
    },
  },
  mounted() {},
  onReachBottom() {
    // this.$refs.recommendIndex.get_host_product();
  },
};
</script>
<style lang="scss" scoped>
.page {
  break-inside: avoid; /* 防止内容被分割到不同列 */
  background-color: #f0f0f0;
  margin-bottom: 17.44rpx; /* 行间距 */
  //   padding: 40rpx;
  box-sizing: border-box;
}
.casing {
  position: relative;
  background: #fff;
  border-radius: 19.19rpx;
  padding-bottom: 40rpx;
  z-index: 10;
  .img {
    border-top-left-radius: 19.19rpx;
    border-top-right-radius: 19.19rpx;
    width: 338rpx;
    height: 248rpx;
  }
  .txt {
    padding: 0rpx 16rpx;
    margin-top: 22rpx;
    font-size: 28rpx;
    color: #212225;
  }
  .tips {
    padding: 0rpx 16rpx;
    font-size: 24rpx;
    color: #c3c3c3;
    margin-top: 6rpx;
  }
  .footer {
    margin-top: 46rpx;
    padding: 0rpx 20rpx 20rpx 20rpx;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .discount {
      font-weight: 500;
      font-size: 35rpx;
      color: #eb3f3a;
    }
  }
}
.footerPart {
  text-align: center;
  margin: 28rpx 16rpx 0rpx 16rpx;
  width: 128rpx;
  line-height: 36rpx;
  height: 36rpx;
  background: #e9f0ff;
  border-radius: 10rpx;
  font-size: 20rpx;
  color: #2683e5;
}
</style>
